<template>
 <div class="list">
     <list-top></list-top>
     <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <van-cell
    v-for="item in list"
    :key="item">
    <div class="good_item">
        <van-image src="https://img.yzcdn.cn/vant/apple-2.jpg" />
        <h5>商品名称<van-tag plain>￥55.55</van-tag></h5>
        <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</p>
     
    <van-button size="mini" type="text" color="#f41414" @click="handleShowSku"  >+购物车</van-button>
    </div>
        <div class="good_item">
            <van-image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
            <h5>商品名称<van-tag plain>￥55.55</van-tag></h5>
              <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</p>
               <van-button size="mini" type="text" @click="handleShowSku" color="#f41414" >+购物车</van-button>
    </div>
  </van-cell>
</van-list>
<tab-bar></tab-bar>
<sku></sku>
 </div>

</template>
 
<script>
  import store from '../../store/index'
import { mapMutations } from 'vuex';
 import listTop from './components/listTop'
 import tabBar from '../tabBar'
 import sku from '../sku'
export default {
    name:"goodList",
    components:{
        listTop,
        tabBar,
        sku,
       
    },
    store,
   data() {
      return {
          list: [],
          loading: false,
          finished: false
      }
   },
    methods: {
      ...mapMutations(["changeSkuShow"]),
      handleShowSku(){
      this.changeSkuShow(true)
      },
      onLoad() {
        // 异步更新数据
        setTimeout(() => {
          for (let i = 0; i < 10; i++) {
            this.list.push(this.list.length + 1);
          }
          // 加载状态结束
          this.loading = false;

          // 数据全部加载完成
          if (this.list.length >= 40) {
            this.finished = true;
          }
        }, 500);
    }
  }
}
 
</script>
 
<style lang="stylus" scoped>
.list
    margin-top 46px
    position relative
    box-sizing border-box
    .van-list
        position relative
        padding 0.15rem
        background #ece3e1
        .van-cell
            background #ece3e1
            padding  0.2rem 0
            .van-cell__value
                display flex
                justify-content space-around
                padding 0
                .good_item
                    width 48%
                    padding 0.1rem
                    box-sizing border-box
                    display inline-block
                    background #fff
                    font-size 0.24rem
                    .van-button
                        float right 
                    h5
                        position relative
                        .van-tag
                            margin-left 6px
    .van-cell:not(:last-child)::after
        left 0
</style>
